<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="showing"
            width="400px"
            height="400px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div>
                <el-form
                    ref="hrPerson"
                    :inline="true"
                    :model="hrPerson"
                    label-width="80px"
                    :rules="rules"
                >
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="hrPerson.name"></el-input>
                    </el-form-item>
                    <el-form-item label="在职">
                        <el-switch v-model="hrPerson.status"></el-switch>
                    </el-form-item>
                </el-form>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="update('hrPerson')">保存</el-button>
                <el-button size="small" @click="hide()">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addHrPerson, setHrPerson } from '@/api/hrPerson';

export default {
    data() {
        return {
            imageUrl: '',
            title: '',
            // 是否显示
            showing: false,
            // 教学场所信息
            hrPerson: {
                departmentId: '',
                id: '',
                code: '',
                name: '',
                sex: '男',
                nation: '',
                marriage: '已婚',
                affiliation: '',
                iDCard: '',
                birthDay: '',
                telphone: '',
                moiblePhone: '',
                email: '',
                address: '',
                hometown: '',
                degree: '',
                remark: '',
                status: true
            },
            //必填项命名规则
            rules: {
                code: [
                    {
                        required: true,
                        message: '人员编码不能为空！',
                        trigger: 'blur'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '人员名称不能为空！',
                        trigger: 'blur'
                    }
                ],
                iDCard: [
                    {
                        required: true,
                        message: '身份证号不能为空！',
                        trigger: 'blur'
                    }
                ],
                birthDay: [
                    {
                        required: true,
                        message: '出生日期不能为空！',
                        trigger: 'blur'
                    }
                ],
                moiblePhone: [
                    {
                        required: true,
                        message: '手机号码不能为空！',
                        trigger: 'blur'
                    }
                ],
                address: [
                    {
                        required: true,
                        message: '现居地址不能为空！',
                        trigger: 'blur'
                    }
                ],
                hometown: [
                    {
                        required: true,
                        message: '籍贯不能为空！',
                        trigger: 'blur'
                    }
                ],
                degree: [
                    {
                        required: true,
                        message: '学历不能为空！',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {},
    methods: {
        // 重置
        resetForm() {
            this.hrPerson = {
                departmentId: '',
                id: '',
                code: '',
                name: '',
                sex: '男',
                nation: '',
                marriage: '已婚',
                affiliation: '',
                iDCard: '',
                birthDay: '',
                telphone: '',
                moiblePhone: '',
                email: '',
                address: '',
                hometown: '',
                degree: '',
                remark: '',
                status: true
            };
        },
        show(departmentId) {
            this.resetForm();
            this.showing = true;
            this.hrPerson.departmentId = departmentId;
            this.title = '新增角色';
        },
        updateShow(obj) {
            this.resetForm();
            this.title = '修改角色';
            this.showing = true;
            console.log('obj', obj);
            let data = obj;
            data.status === 1 ? (data.status = true) : (data.status = false);
            this.$nextTick(() => {
                this.hrPerson = data;
            });
        },
        update(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    let condition = this.hrPerson;
                    condition.status === true ? (condition.status = 1) : (condition.status = 0);
                    if (condition.id != '') {
                        setHrPerson(condition)
                            .then((res) => {
                                console.log('setHrPerson', res);
                            })
                            .catch(() => {});
                    } else {
                        addHrPerson(condition)
                            .then((res) => {
                                console.log('addHrPerson', res);
                            })
                            .catch(() => {});
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        hide() {
            // this.$refs.hrPerson.resetFields();
            this.$refs['hrPerson'].resetFields();
            this.showing = false;
            this.$emit('renderTable');
        },
        // 头像上传
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            console.log('file', file);
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onChange(file, fileList) {
            console.log('change', file);
            var reader = new FileReader();
            reader.readAsDataURL(file.raw); //读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
            let _this = this;
            reader.onload = function (event) {
                _this.imageUrl = event.target.result; //base64
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.content {
    width: 100%;
    display: flex;
    justify-content: left;
    .left-content {
        width: 75%;
        height: 100%;
    }
    .right-content {
        width: 20%;
        height: 100%;
        // .el-upload--text {
        //     width: 180px;
        // }
    }
}
</style>
<style lang="scss">
.upload-demo {
    .el-upload--text {
        width: 180px;
        height: 180px;
    }
}
</style>


